<template>
	<view class="container bg-grey pad20">
		<!-- <sb-back-icon /> -->
		<view class="info-content bg-white radius16 pad20">
			<view class="marv20">
				<u-icon :name="car-fill" class="marh10" color="#df2e2e"></u-icon>
				<span>{{ orderStatus }}</span>
			</view>
			<view class="marv20">
				<view class="c-d">货运类型:</view>
				<view class="u-margin-left-40">
					{{ deliveryType}}
				</view>
			</view>
			<view class="marv20">
				<view class="c-d">货运编号:</view>
				<view class="u-margin-left-40">{{ detailInfo.code }}</view>
			</view>
			<view class="marv20">
				<view class="c-d">发车日期:</view>
				<view class="u-margin-left-40">{{ detailInfo.sendAt }}</view>
			</view>
		</view>
		<u-gap height="30"></u-gap>
		<view class="step-content bg-white radius16 pad40">
			<u-steps :list="deliveryList" direction="column" mode="dot" icon="car-fill"></u-steps>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				deliveryList: [],
				detailInfo: {},
				orderStatus: "",
			};
		},
		onLoad({ id, orderStatus }) {
			if (id) this.id = id;
			if (orderStatus) this.orderStatus === "4" ? "已签收" : "运输中"
			this.getDeliveryList();
		},
		computed: {
			deliveryType() {
				if (!this.detailInfo) return '';
				return [, "空运", "海运"][this.detailInfo.type]
			},
		},
		methods: {
			async getDeliveryList() {
				let { success, data } = await this.$get("/delivery/detail", {
					id: this.id,
				});
				if (data) this.detailInfo = data;
				this.deliveryList = data.records.map((d) => {
					return {
						...d,
						name: d.content +
							"\n" +
							this.$u.timeFormat(d.recordTime, "yyyy-mm-dd hh:MM"),
					};
				});
			},
		},
	};
</script>

<style lang="scss">
	.info-content {}

	.step-content {
		/deep/ .u-steps__item__text--column {
			text-align: start;
		}
	}
</style>
